<!--
这是任务管理的调研结果页面
-->
<template>
    <div id="main">
        <Header/>
        <div id="center">
            <div class="tab_top">
                <div class="tab">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">问卷调研</el-breadcrumb-item>
                    <el-breadcrumb-item>{{this.$route.query.id}}</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <div class="gobackbtn">
                    <el-button size="small" @click="$router.back()">返回</el-button>
                    <el-button size="small" type="primary">导出明细</el-button>
                </div>
            </div>

            <div class="result-center">
                <div class="result-search">
                    <h2 style="display: inline-block;margin: 0;font-size: 12px;margin-left: 24px;margin-right: 130px;">{{this.$route.query.resultinfo}}</h2>
                    <el-select v-model="value" placeholder="请选择部门" size="mini" style="width: 1.66rem;margin-right: 7px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="请选择年级" size="mini" style="width: 1.66rem;margin-right: 7px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="姓名" size="mini" style="width: 1.66rem;margin-right: 7px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-select v-model="value" placeholder="请选择参与情况" size="mini" style="width: 1.66rem;margin-right: 7px;">
                        <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                        </el-option>
                    </el-select>
                    <el-button size="small" type="primary">查询</el-button>
                </div>
                <h2 style="font-size: 0.15rem;margin-left: 0.3125rem;">{{this.$route.query.resultname}}</h2>

                <div class="result-tab">
                    <el-table
                    border
                    :data="resulttab1.slice((currentPage-1)*pageSize,currentPage*pageSize)"
                    style="width: 100%;font-size: 10px;"
                    :default-sort = "{prop: 'date', order: 'descending'}"
                    >
                    <el-table-column
                    prop="department"
                    width="170"
                    label="部门">
                    </el-table-column>

                    <el-table-column
                    prop="job_id"
                    label="工号"
                    width="170">
                    </el-table-column>

                    <el-table-column
                    prop="nickname"
                    label="姓名"
                    width="150">
                    </el-table-column>

                    <el-table-column
                    prop="sex"
                    label="性别"
                    width="150">
                    </el-table-column>

                    <el-table-column
                    prop="state"
                    label="参与情况"
                    width="160">
                    </el-table-column>

                    <el-table-column
                    label="操作"
                    width="150">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">详情</el-button>
                    </template>
                    </el-table-column>

                </el-table>
                </div>
              <div style="margin: 10px;text-align: center">
                <el-pagination
                  :currentPage="currentPage"
                  :page-size="pageSize"
                  :page-sizes="[5, 10, 20]"
                  :small="small"
                  :disabled="disabled"
                  :background="background"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total"
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                />
              </div>

            </div>


        </div>
    </div>
</template>
<script>
import Header from "../../../components/Header.vue"
import request from "../../../utils/request";
export default {
    created() {
        this.select();
    },
    data() {
        return {
            resultname : this.$route.query.resultname,
            quest_invest_id : this.$route.query.quest_invest_id,
            task_id : this.$route.query.task_id,
            num:0,
            lists:{},
            currentPage:1,
            total:10,
            pageSize:10,
            resulttab1:{},
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            value: '',
            resulttab:[{
                department: "教务处",
                number: "2016012213",
                name: "佘云香",
                gender: "女",
                state: "已参与",
                operation: ""
            },
            {
                department: "政务处",
                number: "2016012213",
                name: "何翌晨",
                gender: "男",
                state: "未参与",
                operation: ""
            },
            {
                department: "总务处",
                number: "2016012213",
                name: "游婷婷",
                gender: "女",
                state: "已参与",
                operation: ""
            },
            {
                department: "年级组",
                number: "2016012213",
                name: "何翌晨",
                gender: "男",
                state: "已参与",
                operation: ""
            },
            {
                department: "党群机构",
                number: "2016012213",
                name: "张婷婷",
                gender: "男",
                state: "已参与",
                operation: ""
            },
            {
                department: "财务处",
                number: "2016012213",
                name: "王智琴",
                gender: "男",
                state: "未参与",
                operation: ""
            },
            {
                department: "宣传部",
                number: "2016012213",
                name: "佘云香",
                gender: "女",
                state: "未参与",
                operation: ""
            },
            {
                department: "科研处",
                number: "2016012213",
                name: "何翌晨",
                gender: "男",
                state: "未参与",
                operation: ""
            }],
        }
    },
    components: {
        Header
    },
    methods: {
        handleClick(i){
            // console.log(i.name)
            console.log(this.quest_invest_id)
            this.$router.push({path:"/persondetail",query: { id: i.name ,
                resultname : this.resultname,
                quest_invest_id:this.quest_invest_id,
                task_id:this.task_id
            }})
        },
        select(){
            request.post("/user/selectUser").then(res => {
                this.resulttab1 = res;
                this.total = this.resulttab1.length
            })
        },
        handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.select(this.num)
        },
        handleCurrentChange(currentPage){
            this.currentPage = currentPage
            this.select(this.num)
        },
    },
}
</script>
<style>
#main {
    width: 19.1rem;
    height: 9.69rem;
    background: #EBEFF0;
}
#center{
    width: 12rem;
    height: 8.3rem;
    margin: 0 auto;
    background: #FFFFFF;
    margin-top: 0.4rem;
}
.tab_top{
    height: 0.64rem;
    border-bottom: solid 2px #f2f2f2;
}
.tab{
    float: left;
    margin-top: 25px;
    margin-left: 24px;
}
.gobackbtn{
    float: right;
    line-height: 0;
    margin-right: 20px;
}
.result-center{
    font-size: 14px;
}
.result-search{
    margin: 24px 0 23px 0;
}
.result-tab{
    margin-top: 24px;
}
.el-table .el-table__cell {
    padding: 7px 0;
    }
.paging{
    margin-left: 260px;
    margin-top: 25px;
}
</style>
